<template>
  <el-dialog
    v-model="open"
    :title="title"
    center
    width="1000px"
    height="500px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-table ref="dialogRef" :data="form.trainHotelList">
      <el-table-column label="酒店名称" prop="name" min-width="100" />
      <el-table-column
        label="住店时间"
        prop="moveIntoTimeStr"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="费用"
        min-width="80"
        prop="cost"
      ></el-table-column>
      <el-table-column
        label="房间数"
        min-width="50"
        prop="rooms"
      ></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from "@vue/runtime-core";
import { ref, watch } from "vue";
import { toRefs } from "@vueuse/shared";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
const loading = ref(true);

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: "",
    }),
  },
});
const formBase = {};
let selectedIds = [];

const data = reactive({
  form: {
    ...formBase,
  },
  rules: {},
});

const { open, title } = toRefs(props.props);
const { form, rules } = toRefs(data);
watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase };
  } else {
    open.value = false;
  }
});
</script>

<style scoped lang="scss">
.dpflex {
  display: flex;
  span {
    margin: 0 15px;
  }
}
</style>
